<!--
 * @FileDescription 
 * @Author lz
 * @Date 20221120 14:24:08
 * @LastEditors lz
 * @LastEditTime 20221120 14:24:08
-->
<template>
    <div class="Mask" v-if="data.hide">
        <div class="Box">
            <div class="content" v-if="data.codes == 1">
                <div class="tit">找回密码</div>
                <div @click="ExitProgram" class="close">
                    <img src="../assets/img/other/icon-exit.png">
                </div>
                <div class="accountBox">
                    <div class="wri">账号：</div>
                    <input type="text" v-model="data.accountNumber">
                </div>
                <div class="verificationBox">
                    <div class="wri">验证码：</div>
                    <input type="text" v-model="data.verificationCode">
                    <div class="verificationBtn" v-if='data.CodeState' @click="Send">发送验证码</div>
                    <div class="verificationBtn" v-else>{{ data.countDown }}</div>
                </div>
                <p class="Tips">{{ data.TipsTxt }}</p>
                <div class="BtnBox">
                    <div class="nextStep" @click="nextStepBtn(1)">下一步</div>
                    <div class="cancel" @click="ExitProgram">取消</div>
                </div>
            </div>
            <div class="content" v-if="data.codes == 2">
                <div class="tit">找回密码</div>
                <div @click="ExitProgram" class="close">
                    <img src="../assets/img/other/icon-exit.png">
                </div>
                <div class="passwordBox">
                    <div class="wri">新的密码：</div>
                    <input type="password" v-model="data.newPassword">
                </div>
                <div class="repeatBox">
                    <div class="wri">重复密码：</div>
                    <input type="password" v-model="data.repeatPassword">
                </div>
                <p class="Tips" v-if="data.pV">{{ data.TipsTxt }}</p>
                <div class="BtnBox">
                    <div class="nextStep" @click="nextStepBtn(2)">完成修改</div>
                    <div class="cancel" @click="ExitProgram">取消</div>
                </div>
            </div>
            <div class="content" v-if="data.codes == 3">
                <div class="tit">找回密码</div>
                <div @click="ExitProgram" class="close">
                    <img src="../assets/img/other/icon-exit.png">
                </div>
                <div class="Tiptext">密码修改成功！</div>
                <div class="BtnBox">
                    <div class="returnBtn" @click="ExitProgram">返回登录</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script >
import { defineComponent, reactive, onMounted, toRef, toRefs, nextTick } from "vue";
import { postDatajson } from "@/assets/js/pubilcs.js";

export default defineComponent({
    setup() {
        let data = reactive({
            hide: false,
            accountNumber: '',
            verificationCode: '',
            codes: 1,
            CodeState: true,
            newPassword: '',
            repeatPassword: '',
            contrastCode: '',
            pV: false,
            vCP: false,
            TipsTxt: '',
            Identification: 1,
            countDown: 60,
            timer: '',
        })
        function show() {
            data.hide = true
        }
        function ExitProgram() {
            clearInterval(data.timer);
            data.hide = false
            data.codes = 1
            data.accountNumber = ''
            data.verificationCode = ''
            data.newPassword = ''
            data.repeatPassword = ''
            data.contrastCode = ''
            data.pV = false
            data.vCP = false
            data.TipsTxt = ''
            data.CodeState = true
            data.Identification = 1
            data.countDown = 60
        }
        function Send() {
            if (data.accountNumber == '') {
                data.TipsTxt = '请完善信息！'
            } else {
                data.CodeState = false
                start()
                postDatajson("/api/User/UserAuthent", JSON.stringify({ UserName: data.accountNumber })).then((res) => {
                    if (res.success) {
                        data.contrastCode = res.result.result.inviteCode
                        data.Identification = res.result.result.userId
                    }
                }).catch(error => {
                    console.log(error)
                });
            }
        }
        function start() {
            data.timer = setInterval(time, 1000)
        }
        function time() {
            if (data.countDown == 0) {
                data.CodeState = true
                clearInterval(data.timer);
                return
            }
            data.countDown--
            console.log(data.countDown);
        }
        function nextStepBtn(val) {
            if (val == 1) {
                if (data.accountNumber == '') {
                    data.TipsTxt = '请完善信息！'
                } else if (data.verificationCode == '') {
                    data.TipsTxt = '请输入验证码!'
                } else if (data.verificationCode != data.contrastCode) {
                    data.TipsTxt = '验证码错误!'
                }
                else if (data.verificationCode == data.contrastCode) {
                    data.codes = 2
                }
            } if (val == 2) {
                if (data.newPassword == '') {
                    data.TipsTxt = '请完善信息'
                    data.pV = true
                    return
                }
                if (data.newPassword == data.repeatPassword) {
                    console.log(data.Identification)
                    postDatajson("/api/User/ResetPassword", JSON.stringify({ Password: data.newPassword, UserId: data.Identification })).then((res) => {
                        if (res.result.success) {
                            data.codes = 3
                        }
                    }).catch(error => {
                        console.log(error)
                    });
                } else {
                    data.TipsTxt = '两次密码输入不一致，请重新输入'
                    data.pV = true
                }
            }
        }
        return {
            show,
            data,
            ExitProgram,
            Send,
            nextStepBtn,
            start,
            time,
        }
    }
})


</script>

<style scoped>
.Mask {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
}

.Box {
    position: absolute;
    left: 50%;
    top: 43%;
    transform: translate(-50%, -40%);
    width: 640px;
    height: 480px;
    background: rgba(0, 0, 0, 0);
    background: linear-gradient(0deg, #807DE1, #218CDE);
    border-radius: 20px;
    padding: 6px;
    box-sizing: border-box;
    z-index: 999;
}

.content {
    width: 100%;
    height: 100%;
    background-color: #131620;
    border-radius: 20px;
}

.close {
    position: absolute;
    top: 10px;
    right: 10px;
}

.tit {
    font-size: 24px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #81859C;
    position: absolute;
    left: 20px;
    top: 20px;
}

.wri {
    float: left;
    margin-top: 16px;
    margin-left: 38px;
}

.accountBox {
    text-align: left;
    padding-top: 100px;
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #81859C;
}

.accountBox input {
    width: 446px;
    height: 60px;
    background: rgba(54, 56, 75, 0);
    border: 1px solid #36384B;
    outline: none;
    color: #fff;
    font-size: 24px;
    padding-left: 10px;
    margin-left: 16px;
}

.passwordBox {
    text-align: left;
    padding-top: 100px;
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #81859C;
}

.passwordBox input {
    width: 430px;
    height: 60px;
    background: rgba(54, 56, 75, 0);
    border: 1px solid #36384B;
    outline: none;
    color: #fff;
    font-size: 24px;
    padding-left: 10px;
    margin-left: 16px;
}

.repeatBox {
    text-align: left;
    padding-top: 40px;
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #81859C;
}

.repeatBox input {
    width: 430px;
    height: 60px;
    background: rgba(54, 56, 75, 0);
    border: 1px solid #36384B;
    outline: none;
    color: #fff;
    font-size: 24px;
    padding-left: 10px;
    margin-left: 16px;
}

.verificationBox {
    text-align: left;
    padding-top: 40px;
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #81859C;
}

.verificationBox input {

    width: 266px;
    height: 60px;
    background: rgba(54, 56, 75, 0);
    border: 1px solid #36384B;
    outline: none;
    color: #fff;
    font-size: 24px;
    padding-left: 10px;
}

.verificationBtn {
    display: inline;
    width: 160px;
    height: 60px;
    background: linear-gradient(90deg, #807DE1, #218CDE);
    font-size: 24px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 60px;
    padding: 18px;
    margin-left: 20px;
    margin-top: 2px;
}

.Tips {
    position: absolute;
    bottom: 160px;
    left: 50%;
    transform: translate(-50%, 0);
    padding-top: 20px;
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #81859C;
}

.nextStep {
    float: left;
    width: 225px;
    height: 83px;
    background-image: url('../assets/img/res/btn-ok-bg-normal.png');
    background-size: 100%;
    margin-left: 60px;
    margin-top: 20px;
    font-size: 30px;
    font-family: MF ShangYa (Noncommercial);
    font-weight: 400;
    color: #FFFFFF;
    line-height: 100px;
}

.cancel {
    float: left;
    width: 225px;
    height: 83px;
    background-image: url('../assets/img/res/btn-cancel-bg-normal.png');
    background-size: 100%;
    margin-left: 60px;
    margin-top: 20px;
    font-size: 30px;
    font-family: MF ShangYa (Noncommercial);
    font-weight: 400;
    color: #FFFFFF;
    line-height: 100px;
}

.BtnBox {
    margin-top: 40px;
    overflow: hidden;
}

.returnBtn {
    width: 225px;
    height: 83px;
    background-image: url('../assets/img/res/btn-ok-bg-normal.png');
    background-size: 100%;
    margin: 60px auto;
    font-size: 30px;
    font-family: MF ShangYa (Noncommercial);
    font-weight: 400;
    color: #FFFFFF;
    line-height: 100px;
}

.Tiptext {
    padding-top: 200px;
    font-size: 24px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #FFFFFF;
}
</style>